<template>
	<div class="login-form-wrapper">
		<!-- <div class="login_config">
			<el-dropdown trigger="click" placement="bottom-end">
				<el-button circle text>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
						aria-hidden="true"
						role="img"
						width="1em"
						height="1em"
						preserveAspectRatio="xMidYMid meet"
						viewBox="0 0 512 512"
					>
						<path
							d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z"
							fill="currentColor"
						></path>
						<path
							d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
							fill="currentColor"
						></path>
					</svg>
				</el-button>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item @click="changeLanguage('zh')"
							>中文</el-dropdown-item
						>
						<el-dropdown-item @click="changeLanguage('en')"
							>EngLish</el-dropdown-item
						>
						<el-dropdown-item @click="changeLanguage('ja')"
							>日本語</el-dropdown-item
						>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div> -->
		<div class="login-form-title">登录项目管理系统</div>
		<div class="login-form-sub-title">{{ $t2("t_login_description") }}</div>
		<div class="login-form-error-msg">{{ errorMessage }}</div>
		<el-form
			ref="loginForm"
			:model="inputForm"
			size="large"
			:rules="rules"
			class="login-form"
			@keyup.enter="login()"
			@submit.prevent
		>
			<el-form-item prop="username">
				<el-input
					prefix-icon="user"
					placeholder="请输入账号"
					clearable
					v-model="inputForm.username"
				></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input
					ref="passwordInput"
					type="password"
					
					placeholder="请输入密码"
					clearable
					v-model="inputForm.password"
					show-password
				>
					
				</el-input>
			</el-form-item>

			<el-row :gutter="10">
				<el-col :span="16">
					<el-form-item prop="code">
						<el-input
							placeholder="请输入验证码"
							v-model="inputForm.code"
							text
							clearable
						></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8"
					><el-image
						@click="getCaptcha"
						:src="captchaImg"
						style="height: 34px"
					></el-image
				></el-col>
			</el-row>

		
				<el-button
					type="primary"
					:loading="loading"
					class="login-submit"
					@click="login"
					>登录</el-button
				>
			<el-form-item> </el-form-item>
		</el-form>
	</div>
</template>

<script>
import config from "@/config";
import loginService from "@/api/auth/loginService";
import userService from "@/api/sys/userService";
import tenantService from "@/api/sys/tenantService";
export default {
	data() {
		return {
			time: "",
			logo: "",
			productName: "",
			loading: false,
			captchaImg: "",
			inputForm: {
				username: "",
				password: "",
				uuid: "",
				captcha: "",
			},
			rules: {
				username: [
					{
						required: true,
						message: "帐号不能为空",
						trigger: "blur",
					},
				],
				password: [
					{
						required: true,
						message: "密码不能为空",
						trigger: "blur",
					},
				],
				code: [
					{
						required: true,
						message: "验证码不能为空",
						trigger: "blur",
					},
				],
			},
			captchaPath: "",
		};
	},
	created() {
		this.$cookies.remove(config.TOKEN);
		this.$TOOL.data.remove("DICT_LIST");
		this.$TOOL.data.remove("TENANT_LIST");
		this.$TOOL.data.remove("IS_PRIMARY_TENANT");
		this.$TOOL.data.remove(config.TOKEN);
		this.$TOOL.data.remove("USER_INFO");
		this.$TOOL.data.remove("MENU");
		this.$TOOL.data.remove("PERMISSIONS");
		this.$TOOL.data.remove("grid");
		this.$store.commit("clearViewTags");
		this.$store.commit("clearKeepLive");
		this.$store.commit("clearIframeList");
	},
	mounted() {
		this.getCaptcha();
	},
	computed: {
		appName() {
			return this.$store.state.global.appName;
		},
	},
	methods: {
		// 提交表单
		async login() {
			this.$refs.loginForm.validate((valid) => {
				if (valid) {
					this.loading = true;
					loginService
						.login(this.inputForm)
						.then(async (loginResp) => {
							this.$TOOL.data.set(config.TOKEN, loginResp.token);
							this.$cookies.set(
								config.TOKEN,
								loginResp.token,
								-1
							);
							let { user } = await userService.info();
							this.$TOOL.data.set("USER_INFO", user);
							this.$store.commit("user/updateUser", user);
							let isPrimaryTenant = user.tenantDTO.id === "10000";
							this.$TOOL.data.set(
								"IS_PRIMARY_TENANT",
								isPrimaryTenant
							);
							if (isPrimaryTenant) {
								tenantService.list().then((data) => {
									this.$TOOL.data.set(
										"TENANT_LIST",
										data.records
									);
								});
							}
							let { menuList, permissions, dictList } =
								await userService.getMenus();
							if (menuList.length == 0) {
								this.loading = false;
								this.$alert(
									"当前用户无任何菜单权限，请联系系统管理员",
									"无权限访问",
									{
										type: "error",
										center: true,
									}
								);
								return false;
							}
							this.$TOOL.data.set("MENU", menuList);
							this.$TOOL.data.set("PERMISSIONS", permissions);
							this.$TOOL.data.set("DICT_LIST", dictList);
							this.$notify({
								title: "登录成功",
								message: `欢迎回来！<br/>你上次的登录IP是 ${loginResp.oldLoginIp}，登录时间是 ${loginResp.oldLoginDate}。`,
								dangerouslyUseHTMLString: true,
								duration: 10000,
								type: "success",
							});
							this.$router.replace({
								path: "/",
							});
						})
						.catch(() => {
							this.loading = false;
							this.getCaptcha();
						});
				}
			});
		},
		configTheme() {
			this.config.theme =
				this.config.theme == "default" ? "dark" : "default";
		},
		configLang(command) {
			this.config.lang = command.value;
		},
		// 获取验证码
		getCaptcha() {
			loginService.getCode().then((data) => {
				this.captchaImg = "data:image/gif;base64," + data.codeImg;
				this.inputForm.uuid = data.uuid;
			});
		},
		// 切换语言
		changeLanguage(language) {
			this.$TOOL.data.set("APP_LANG", language);
			this.$store.commit("updateLanguage", language);
		},
		
	},
};
</script>

<style lang="less" scoped>
.login_config {
	position: absolute;
	top: 60px;
	right: 60px;
}
.login-form {
	&-wrapper {
		width: 400px;
	}

	&-title {
		text-align: center;
		color: #475055;
		font-weight: 500;
		font-size: 24px;
		line-height: 32px;
	}

	&-sub-title {
		text-align: center;
		color: #86909c;
		font-size: 14px;
		line-height: 34px;
	}

	&-error-msg {
		height: 32px;
		color: rgb(var(--red-6));
		line-height: 32px;
	}

	&-password-actions {
		display: flex;
		justify-content: space-between;
	}

	&-register-btn {
		color: #86909c !important;
	}
	.login-submit {
		width: 100%;
		color: #fff;
		font-size: 16px;
		background-color: #1890ff;
		border-color: #1890ff;
	}
}
</style>
